<template>
	<view class="search">
		<view class="search-header">
			<view class="ss" style="background-color: #f7f7f7;padding: 4px 10px;width: 84%;border-radius: 30px;">
				<image src="../../static/images/icon/search.png"></image>
				<input type="text" v-model="value" placeholder="请输入关键字搜索" confirm-type="search"
					@confirm="handleSearch" />
			</view>
			<image :src="img" @click="handleClick"></image>
		</view>
		<view class="mian-header">
			<text v-for="(item,index) in list" :key="index" :class="index==sort?'active':''" @click="handleList(index)">
				{{item}}
			</text>
		</view>
		<view class="main" v-if="id==1">
			<view class="main-con-box" v-for="(item,index) in records" :key="index" @click="handBan(item)">
				<image :src="item.pic"></image>
				<view class="main-con-box-right">
					<view class="right-title">
						{{item.prodName}}
					</view>
					<view class="right-p">
						{{item.praiseNumber}}评价 {{item.positiveRating}}%好评
					</view>
					<view class="rihgt-foot">
						<view class="right-foot-l">
							￥{{item.price}} <text>.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main-con-2" v-else>
			<view class="main-con-box" v-for="(item,index) in records" :key="index">
				<image :src="item.pic" @click="handBan(item)"></image>
				<view class="main-con-box-title">
					{{item.prodName}}
				</view>
				<view class="main-con-box-p">
					{{item.praiseNumber}}评价 {{item.positiveRating}}%好评
				</view>
				<view class="rihgt-foot">
					<view class="right-foot-l">
						￥{{item.price}} <text>.00</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				value: "",
				hotSearchList: [],
				searchHistory: [],
				img: "../../static/images/icon/search-col2.png",
				list: ["综合", "销量", "价格"],
				sort: "",
				prodName: "",
				records: [],
				id:1,
			}
		},
		onLoad(option) {
			this.value = option.prodName
			this.prodName = option.prodName
			this.handleList(0)
		},
		onShow() {
			// 将本地存储的数据放到数组中
			this.searchHistory = uni.getStorageSync('recentSearch') || []
		},
		methods: {
			// 跳转商品
			handBan(row) {
				console.log(row);
				if (row.prodId) {
					uni.navigateTo({
						url: `/pages/prod/prod?prodid=${row.prodId}`
					})
				}
			},
			// 综合，销量，价格
			handleList(val) {
				this.sort = val
				http.request({
					url: "/search/searchProdPage",
					method: "get",
					data: {
						current: 1,
						prodName: this.prodName,
						size: 10,
						sort: val
					},
					callBack: res => {
						this.records = res.records

					}
				})
			},
			// 变换样式
			handleClick() {
				if (this.img.includes(2)) {
					this.id=2
					this.img = "../../static/images/icon/search-col.png"
				} else {
					this.id=1
					this.img = "../../static/images/icon/search-col2.png"
				}
			},
			// 回车搜索
			handleSearch() {
				uni.redirectTo({
					url: `/pages/search-prod-show/search-prod-show?prodName=${this.value}`
				})
				// 调用函数判断有没有重复项
				this.addSearchHistory(this.value);
			},
			// 添加搜索历史
			addSearchHistory(keyword) {
				// 如果历史记录中已存在该关键词，则移除
				const index = this.searchHistory.indexOf(keyword);
				console.log(index);
				if (index !== -1) {
					this.searchHistory.splice(index, 1);
				}
				// 添加到数组头部
				this.searchHistory.unshift(keyword);
				// 存储到本地
				uni.setStorageSync('recentSearch', this.searchHistory);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		.search-header {
			padding: 18px 14px 10px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;

			// height: 30px;
			// line-height: 30px;
			image {
				width: 16px;
				height: 16px;
				margin-right: 5px;
				vertical-align: middle;
			}

			input {
				display: inline-block;
				vertical-align: middle;
				font-size: 14px;
				width: 80%;
			}
		}

		.mian-header {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 30px 10px 10px;

			text {
				text-align: center;
				display: inline-block;
				width: 33%;
			}

			.active {
				color: #f00;
			}
		}

		.main {
			padding: 10px;
			.main-con-box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				background-color: #fff;
				padding: 10px;
				border-radius: 10px;
				image {
					width: 90px;
					height: 90px;
					margin-right: 10px;
				}

				.main-con-box-right {
					width: 72%;

					.right-title {
						margin-bottom: 20px;
					}

					.right-p {
						font-size: 12px;
						color: #999;
						margin-bottom: 10px;
					}


				}
			}
		}
		.main-con-2 {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: flex-end;
			background-color: #fff;
			padding: 10px;
			.main-con-box {
				width: 48%;
				margin-bottom: 10px;
				padding-bottom: 10px;
				
				image {
					width: 170px;
					height: 170px;
				}
		
				.main-con-box-title {
					/* 文本不换行 */
					white-space: nowrap;
					/* 超出隐藏 */
					overflow: hidden;
					/* 显示省略号 */
					text-overflow: ellipsis;
					font-size: 16px;
					padding: 10px;
				}
		
				.main-con-box-p {
					padding: 10px 10px 6px;
					font-size: 12px;
					color: #999;
				}
				.rihgt-foot{
					padding-left: 10px;
				}
		
			}
		}
		
		.rihgt-foot {
			color: #f00;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			text {
				font-size: 12px;
			}
		}
	}
</style>